import React, { useState, useEffect } from 'react';
import { Card, Button, Space, Typography, message, Skeleton } from 'antd';
import { LikeOutlined, EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { useNavigate, useParams } from 'react-router-dom';
import { Article } from '../types/article';
import { articleService } from '../services/articleService';
import styled from '@emotion/styled';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.bubble.css';

const { Title, Text } = Typography;

const ArticleHeader = styled.div`
  margin-bottom: 24px;
`;

const ArticleMeta = styled.div`
  display: flex;
  align-items: center;
  color: #8c8c8c;
  margin: 16px 0;
`;

const MetaItem = styled.span`
  display: flex;
  align-items: center;
  margin-right: 24px;
  
  .anticon {
    margin-right: 8px;
  }
`;

const ArticleContent = styled.div`
  margin-top: 24px;
  
  .ql-editor {
    padding: 0;
  }
`;

const ArticleDetail: React.FC = () => {
  const [article, setArticle] = useState<Article | null>(null);
  const [loading, setLoading] = useState(true);
  const navigate = useNavigate();
  const { id } = useParams<{ id: string }>();

  useEffect(() => {
    loadArticle();
  }, [id]);

  const loadArticle = async () => {
    try {
      setLoading(true);
      const data = await articleService.getArticle(Number(id));
      setArticle(data);
    } catch (error) {
      message.error('加载文章失败');
    } finally {
      setLoading(false);
    }
  };

  const handleLike = async () => {
    try {
      const updatedArticle = await articleService.likeArticle(Number(id));
      setArticle(updatedArticle);
      message.success('点赞成功');
    } catch (error) {
      message.error('点赞失败');
    }
  };

  const handleDelete = async () => {
    try {
      await articleService.deleteArticle(Number(id));
      message.success('删除文章成功');
      navigate('/articles');
    } catch (error) {
      message.error('删除文章失败');
    }
  };

  if (loading) {
    return (
      <Card>
        <Skeleton active />
      </Card>
    );
  }

  if (!article) {
    return null;
  }

  return (
    <Card>
      <ArticleHeader>
        <Title level={2}>{article.title}</Title>
        <ArticleMeta>
          <MetaItem>
            <Text type="secondary">作者：{article.author.username}</Text>
          </MetaItem>
          <MetaItem>
            <Text type="secondary">
              发布时间：{new Date(article.createdAt).toLocaleString()}
            </Text>
          </MetaItem>
          <MetaItem>
            <EyeOutlined />
            <Text>{article.viewCount}</Text>
          </MetaItem>
          <MetaItem>
            <LikeOutlined />
            <Text>{article.likeCount}</Text>
          </MetaItem>
        </ArticleMeta>
        <Space>
          <Button type="primary" icon={<LikeOutlined />} onClick={handleLike}>
            点赞
          </Button>
          <Button
            icon={<EditOutlined />}
            onClick={() => navigate(`/articles/${id}/edit`)}
          >
            编辑
          </Button>
          <Button danger icon={<DeleteOutlined />} onClick={handleDelete}>
            删除
          </Button>
        </Space>
      </ArticleHeader>

      <Card type="inner" title="文章摘要">
        {article.summary}
      </Card>

      <ArticleContent>
        <ReactQuill
          value={article.content}
          readOnly
          theme="bubble"
        />
      </ArticleContent>
    </Card>
  );
};

export default ArticleDetail; 